<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原生的ajax</title>
<script
	src="${pageContext.servletContext.contextPath}/static/plugins/jquery-1.12.4/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
	// 原生的ajax处理方式
	function doAjax() {
		// 创建一个ajax引擎对象
		// ajax引擎变量（全局变量）
		var xmlhttp;
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		// 委托ajax引擎进行服务器请求
		// 通过ajax引擎对象的open方法设置ajax请求的参数信息
		// 第一个参数是请求方式；第二个参数是请求的url和from表单的action属性的值一样；第三个参数是请求的方式是同步还是异步（默认是true，异步方式，true（异步）或 false（同步））
		xmlhttp.open("GET", "AjaxDemoControl?uid=111", true);
		// 以get请求为例
		// 让ajax引擎发送request请求到服务器，如果是post方式，则需要早send方法中传递一个表单数据的字符串参数
		xmlhttp.send();
		// 接收服务器响应内容
		// 通过回调函数局部渲染修改浏览器内容
		// ajax引擎在发送request请求之后，会通过 onreadystatechange 来监听服务器和浏览器的状态变化，所有回调函数就是由onreadystatechange行为方法进行触发的
		xmlhttp.onreadystatechange = function() {
			// ajax引擎对象的readyState 状态为4 服务器的status状态码为200时，表示ajax引擎已经成功接收到了响应内容；也就是说，ajax引擎对象完成了http请求任务
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				// 取出ajax引擎中的response的响应内容
				var strText = xmlhttp.responseText;
				// 通过dom操作局部刷新浏览器页面
				document.getElementById("lbl").innerHTML = strText;
			}
		}
	}

	// 使用query的ajax处理方式

	function doAjax2() {
		$.ajax({
			// ajax请求的方式
			type : "GET",
			// url地址，和from表单的action属性值一样
			url : "AjaxDemoControl?uid=222",
			// 会调处理函数 ,注意，function中的参数就是response发回内容
			success : function(data) {
				$("#lbl2").html(data);
			}
		});
	}

	// 使用query的ajax处理方式3

	function doAjax3() {
		$.get("AjaxDemoControl?uid=333", function(data) {
			$("#lbl3").html(data);
		});

	}
	// 使用query的ajax处理方式4

	function doAjax4() {
		$.get("AjaxDemoControl", {uid : "444" }, function(data) {
			$("#lbl4").html(data);
		});
	}
</script>

</head>
<body>
	<label id="lbl"></label>
	<br>
	<input type="button" onclick="doAjax()" value="ajax">
	<br>
	<hr>
	<label id="lbl2"></label>
	<br>
	<input type="button" onclick="doAjax2()" value="jquery-ajax">
	<br>
	<hr>
	<label id="lbl3"></label>
	<br>
	<input type="button" onclick="doAjax3()" value="jquery-ajax3">
	<br>
	<hr>
	<label id="lbl4"></label>
	<br>
	<input type="button" onclick="doAjax4()" value="jquery-ajax4">
</body>
</html>